<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :bordered="false">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <span></span>
        <a-button type="primary" @click="visiable = true" icon="plus">添加轮播图</a-button>
      </div>
      <s-table
        :rowKey="
          (r, i) => {
            return i.toString()
          }
        "
        size="default"
        :columns="columns"
        :data="loadData"
        ref="table"
      >
        <span slot="pic_url" slot-scope="text, record">
          <img :src="record.pic_url" class="slide-img" />
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <a-button type="primary" @click="handleEdit(record)" size="small">编辑</a-button>
            <a-divider type="vertical" />
            <a-popconfirm title="确认删除吗？" @confirm="handleDelete(record)">
              <a-button type="danger" size="small">删除</a-button>
            </a-popconfirm>
          </template>
        </span>
      </s-table>
    </a-card>
    <a-modal
      title="编辑轮播图"
      :width="600"
      :mask-closable="false"
      :destroy-on-close="true"
      v-model="visiable"
      @ok="handleEditSlide()"
      @cancel="
        $refs.table.refresh(true)
        slideParam = {}
      "
    >
      <a-form :form="form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="标题">
          <a-input placeholder="标题" v-model="slideParam.title" />
        </a-form-item>
        <a-form-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <cyyUploadImg @uploadSuccess="onSlideOk" @deleteImg="slideParam.pic_url = ''" :imgSrc="slideParam.pic_url">
          </cyyUploadImg>
          <!-- <storage-select placeholder="请选择评论图片" v-model="slideParam.pic_url" @onOk="onSlideOk"> </storage-select> -->
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="链接">
          <span>{{ slideParam.page_url }}</span>
          <a-divider type="vertical" v-if="slideParam.page_url" />
          <a-button @click="showLink = true">选择</a-button>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序">
          <a-input-number v-model="slideParam.sort" id="inputNumber" :min="1" />
        </a-form-item>
      </a-form>
    </a-modal>
    <new-select-link :type="1" v-model="showLink" @onOk="onOk"></new-select-link>
  </page-header-wrapper>
</template>

<script>
import { STable, SelectLink } from '@/components'
import newSelectLink from '@/components/DiyNew/newSelectLink/index.vue'
import { cyyUploadImg } from '@/components/CyyUi/index'
import { slideList, slideDelete, slideEdit } from '@/api/orderMeal'

const columns = [
  {
    title: '图片标题',
    dataIndex: 'title',
  },
  {
    title: '页面地址',
    dataIndex: 'page_url',
  },
  {
    title: '图片',
    dataIndex: 'pic_url',
    scopedSlots: { customRender: 'pic_url' },
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
  },
]

export default {
  name: 'BargainSlide',
  components: {
    newSelectLink,
    SelectLink,
    STable,
    cyyUploadImg,
  },
  data() {
    return {
      activeTab: '5',
      tabs: [
        {
          value: '0',
          text: '商品管理',
          path: 'FoodGoods',
        },
        {
          value: '1',
          text: '分类',
          path: 'FoodCat',
        },
        {
          value: '2',
          text: '餐桌管理',
          path: 'FoodTableNumber',
        },
        {
          value: '3',
          text: '设置',
          path: 'FoodSetting',
        },
        {
          value: '4',
          text: '店铺点餐二维码',
          path: 'FoodQrcode',
        },
        {
          value: '5',
          text: '轮播图',
          path: 'FoodSwiper',
        },
      ],
      showLink: false,
      visiable: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      form: this.$form.createForm(this),
      // 表头
      columns,
      // 权限树
      permissionTree: [],
      modalLoading: false,
      defaultCheckedKeys: [],
      // 查询条件参数
      queryParam: {},
      slideParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        Object.assign(parameter, this.queryParam)
        return slideList({ ...parameter, md_id: -1 }).then((res) => {
          return res.data
        })
      },
    }
  },
  created() {},
  methods: {
    // tab切换
    tabChange(e) {
      if (e == 5) return
      let item = this.tabs[e]
      this.$router.push({ name: item.path })
    },
    handleDelete(record) {
      const hide = this.$message.loading('删除中...', 0)
      slideDelete({
        id: record.id,
        md_id: -1,
      })
        .then((res) => {
          hide()
          if (res.code === 0) {
            this.$message.success('轮播图删除成功')
            this.$refs.table.refresh()
          } else {
            this.$error({
              content: res.msg,
            })
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    handleEdit(record) {
      this.visiable = true
      this.slideParam = record
    },
    handleEditSlide() {
      const hide = this.$message.loading('保存中...', 0)
      slideEdit(this.slideParam, true)
        .then((res) => {
          hide()
          if (res.code === 0) {
            this.$message.success('保存成功')
            this.visiable = false
            this.$refs.table.refresh()
          } else {
            this.$error({
              content: res.msg,
            })
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
      this.slideParam = {}
    },
    onSlideOk(val) {
      this.$set(this.slideParam, 'pic_url', val.data)
    },
    selectLink() {
      this.showLink = true
    },
    onOk(e) {
      this.slideParam.page_url = e.link
    },
  },
}
</script>

<style scoped>
.slide-img {
  height: 50px;
  width: auto;
}
</style>
